import React, { useState, useEffect} from 'react';
import { Button, Table, Space, Form, Input, Select,message,Popconfirm} from 'antd';
import axios from '../../../utils/myAixos'
import {
    useNavigate
} from "react-router-dom";
import "./personal.scss"
const Personal = () => {
    // 列表表名
    const columns = [
        {
            title: '序号',
            dataIndex: 'c_id',
            align: 'center',
            key:'c_id'
        },
        {
            title: '课程图片',
            align: 'center',
            render: (_, record) => (
              <div>
                 < img style={{ width: "60px", height: "60px" }} src={'/api' +record.c_src} alt="" />
              </div>
            ),
            
        },
        {
            title: '课程名称',
            dataIndex: 'c_name',
            align: 'center',
            key:'c_name'
        },
        {
            title: '教练',
            dataIndex: 'c_teacher',
            align: 'center',
            key:'c_teacher'
        },
        {
            title: '时长',
            dataIndex: 'c_time',
            align: 'center',
            key:'c_time'
        },
        {
            title: '可预约人数',
            dataIndex: 'c_number',
            align: 'center',
            key:'c_number'

        },
        {
            title: '操作',
            dataIndex: 'm_caozuo',
            align: 'center',
            render: (_, record) => (
                <Space size="middle">
                    <a type="primary" onClick={() => Edit(record)}>编辑</a>
                    <a type="primary" onClick={() => Schedule(record)}>排期</a>
                    <Popconfirm
                        title="删除该条数据"
                        description="确定删除吗？"
                        onConfirm={() => confirmDel(record)}
                        onCancel={cancelDel}
                        okText="确定"
                        cancelText="取消"
                    >
                        <a type="primary">删除</a>
                    </Popconfirm>
                </Space>
            ),
            
        },

    ];
    const [dataList, setDataList] = useState([]); //表格数据
    //获取学生数据
    const getStu = () => {
        axios({
            url: '/course',
            method: 'post'
        }).then(res => {
            console.log('获取所有学生数据', res.data.data)
            console.log(res.status)
            if (res.status === 200) {
                setDataList(res.data.data)
            }
        }).catch(err => {
            console.log('获取所有学生数据', err)
        })
    }
    //1、获取到所有学生的数据
    useEffect(() => {
        getStu()
    }, [])
    //确定删除
      const confirmDel = (row) => {
        console.log('确定删除按钮',row)
        //发请求
        axios({
            url: '/courseDel',
            method: 'post',
            data:{
                c_id:row.c_id
            }
        }).then(res => {
            console.log('删除学生数据', res)
            if (res.status === 200) {
                message.success("删除成功")
                getStu()
            }else{
                message.error("删除失败")
            }
        }).catch(err => {
            console.log('删除学生数据', err)
        })
    }
    const cancelDel = () => {

    }
    //点击查询
    const search = (params) => {
        console.log('values',params)
        axios({
            url: '/courseSearch',
            method: 'post',
            data:params
        }).then(res => {
            console.log('查询学生的结果', res)
            if (res.status === 200) {
                //获取成功
                // res.data
                setDataList(res.data.data)
                message.success('查询成功')
            }else{
                message.error('查询失败')
            }
        }).catch(err => {
            console.log('查询学生的结果', err)
        })
    }
    //排期
    const navigate = useNavigate()
    const Schedule = (row) => {
        console.log('确定编辑按钮',row.c_id)
        navigate('/HomePage/schedule',{ state:row})
    }
    // //添加私教
    const Add = () => {
        navigate("/HomePage/addClass")
    }
    // 编辑
    const Edit = (row) => {
        console.log('确定编辑按钮',row.c_id)
        navigate('/HomePage/editClass',{ state: {id:row.c_id} })
    }
    return (
        <div className={"box"}>
            <header style={{margin:"20px"}}>
                <Form name="horizontal_login" 
                layout="inline" 
                onFinish={search}
                >
                    <Form.Item
                        name="c_name"
                    >
                        <Input placeholder="课程名称" />
                    </Form.Item>
                    <Form.Item
                        name="c_teacher"
                    >
                        <Select
                            defaultValue="请选择课程教练"
                            style={{
                                width: 120,
                            }}
                            options={[
                                {
                                    value: '从有',
                                    label: '从有',
                                }
                            ]}
                        />

                    </Form.Item>
                    <Form.Item shouldUpdate>
                        {() => (
                            <Button
                                type="primary"
                                htmlType="submit"
                            >
                                查询
                            </Button>
                        )}
                    </Form.Item>
                    <Form.Item>
                        {/*#e6f4ff*/}
                        <Button type={"text"} style={{ border: "1px solid #D2D2D2" }} onClick={Add}>添加私教</Button>
                    </Form.Item>
                </Form>

            </header>
            {/* 表单 rowKey传参*/}
            <Table columns={columns} dataSource={dataList} rowKey={record => record.c_id} />
        </div>
    )
}
export default Personal 